<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			strong{
				margin-right: 10px;
			}
		</style>
		<script src="../js/vue.js"></script>
		<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="phone" /> 
			<h3>{{phone}}</h3>
		
		<input type="radio" value="男"  v-model="sex"  />男
		<input type="radio" value="女"  v-model="sex"  />女
		<input type="radio" value="人妖" v-model="sex"  />人妖
		
		<p>你选择的性别是：{{sex}}</p>
			
		<hr /><br /> <br />	
		
	<p><input type="checkbox"  v-model="xy" /> 《大熊协议》 </p>	
	<p>你对协议选择是： {{xy?'同意':'不同意'}}</p>	
	
	<hr /><br /> <br />	
	
	<input type="checkbox" value="北大青鸟" v-model="school" />北大青鸟
	<input type="checkbox" value="清华IT" v-model="school" />清华IT
	<input type="checkbox" value="蓝翔驾校" v-model="school" />蓝翔驾校
	<input type="checkbox" value="新东方厨师" v-model="school" />新东方厨师
	<p>你选择的学校是：<strong v-for="item in school">{{item}}</strong>   </p>	
		
	<hr /><br /> <br />		
		
	<select v-model="score">
		<option value="黑铁">黑铁</option>
		<option value="青铜">青铜</option>
		<option value="白银">白银</option>
		<option value="黄金">黄金</option>
		<option value="铂金">铂金</option>
		<option value="钻石">钻石</option>		
	</select>	
		
	<p>你的段位是：{{score}}</p>	
		
	</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				phone:'',
				sex:'',
				xy:'',
				school:[],
				score:'白银'
				
			},
			
		})
		
		
		
	</script>
	
	
	 <!-- Input : text radio checkbox textare ,
	 Select:
	  'peakchao',
	  '123456'
	  -->
	</body>
</html>
